{template "content","header_page"}
  <div class="bgbody" style="background: url(http://m.nsr.com.cn/resource/uploadfile/column_icon/21.jpg) no-repeat top center;">
    <div class="main">

          <div class="rightbox">

              <div class="tipsearch">
                <div class="topnav">
                  <ul>
                    <li><a href="/index.php?m=content&c=index&a=lists&catid={$catid}" class="onin">{$CAT['catname']}</a><span>|</span></li>
                    <li><a>{$info['title']}</a></li>
                  </ul>
                </div>
              </div>

              <!-- 模特介绍 幻灯轮播结束 -->
              <div class="mote1">
                <!-- 图片轮播代码 开始 -->
                <div class="mod18Box">
                  <div class="mod18">
                    <span id="prev" class="btn prev"></span>
                    <span id="next" class="btn next"></span>
                    <span id="prevTop" class="btn prev"></span>
                    <span id="nextTop" class="btn next"></span>
                    <div id="picBox" class="picBox">
                      <ul class="cf">
                        {loop $pictureurls $v}
                        <li>
                          <a href="{$v[url]}" target="_blank"><img width="884" height="563" src="{$v[url]}" alt="{$v[alt]}" /></a>
                        </li>
                        {/loop}
                      </ul>
                    </div>
                    <div class="blackbox">
                  
                    <div id="listBox" class="listBox">
                      <ul class="cf">
                        {loop $pictureurls $key $v}
                        <li {if $key == 0}class="on"{/if}><i class="arr2"></i><img width="212" height="123" src="{$v[url]}" alt="{$v[alt]}" /></li>
                        {/loop}
                      </ul>
                    </div>
                    </div>
                  </div>
                </div>
                <script type="text/javascript">
                (function(){
                  function G(s){
                    return document.getElementById(s);
                  }
                  
                  function getStyle(obj, attr){
                    if(obj.currentStyle){
                      return obj.currentStyle[attr];
                    }else{
                      return getComputedStyle(obj, false)[attr];
                    }
                  }
                  
                  function Animate(obj, json){
                    if(obj.timer){
                      clearInterval(obj.timer);
                    }
                    obj.timer = setInterval(function(){
                      for(var attr in json){
                        var iCur = parseInt(getStyle(obj, attr));
                        iCur = iCur ? iCur : 0;
                        var iSpeed = (json[attr] - iCur) / 4;
                        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                        obj.style[attr] = iCur + iSpeed + 'px';
                        if(iCur == json[attr]){
                          clearInterval(obj.timer);
                        }
                      }
                    }, 30);
                  }

                  var oPic = G("picBox");
                  var oList = G("listBox");
                  
                  var oPrev = G("prev");
                  var oNext = G("next");
                  var oPrevTop = G("prevTop");
                  var oNextTop = G("nextTop");

                  var oPicLi = oPic.getElementsByTagName("li");
                  var oListLi = oList.getElementsByTagName("li");
                  var len1 = oPicLi.length;
                  var len2 = oListLi.length;
                  
                  var oPicUl = oPic.getElementsByTagName("ul")[0];
                  var oListUl = oList.getElementsByTagName("ul")[0];
                  var w1 = oPicLi[0].offsetWidth;
                  var w2 = oListLi[0].offsetWidth;

                  oPicUl.style.width = w1 * len1 + "px";
                  oListUl.style.width = w2 * len2 + "px";

                  var index = 0;
                  
                  var num = 4;
                  var num2 = Math.ceil(num / 1);

                  function Change(){

                    Animate(oPicUl, {left: - index * w1});
                    
                    if(index < num2){
                      Animate(oListUl, {left: 0});
                    }else if(index + num2 <= len2){
                      Animate(oListUl, {left: - (index - num2 + 1) * w2});
                    }else{
                      Animate(oListUl, {left: - (len2 - num) * w2});
                    }

                    for (var i = 0; i < len2; i++) {
                      oListLi[i].className = "";
                      if(i == index){
                        oListLi[i].className = "on";
                      }
                    }
                  }
                  
                  oNextTop.onclick = oNext.onclick = function(){
                    index ++;
                    index = index == len2 ? 0 : index;
                    Change();
                  }

                  oPrevTop.onclick = oPrev.onclick = function(){
                    index --;
                    index = index == -1 ? len2 -1 : index;
                    Change();
                  }

                  for (var i = 0; i < len2; i++) {
                    oListLi[i].index = i;
                    oListLi[i].onclick = function(){
                      index = this.index;
                      Change();
                    }
                  }
                })()
                </script>
                <!-- 图片轮播代码 结束 -->
              </div>
              <!-- 模特介绍 幻灯轮播结束 -->

              <!-- 模特介绍 开始 -->
            <div class="modelzx clear">

              <ul class="updownZX">
                <li><a href="{$previous_page[url]}"> 【上一篇】: {$previous_page[title]}</a></li>
                <li><a href="{$next_page[url]}"> 【下一篇】: {$next_page[title]}</a></li>
              </ul>
            </div>
            
          </div>
    </div>
    <div class="clear"></div>
  </div>
  
 
 
{template "content","footer"}

</body>